<template>
  <ul>
    <Item
      v-for="(item, i) in msg"
      :key="i"
      :item="item"
      @changeVal="changeVal"
      @changeName="changeName"
    ></Item>
  </ul>
</template>

<script>
import Item from "@/components/user/changeUserMsg/main/Item";
import { changeUsername, changeJobName, changeCompanyName } from "@/api/user";
export default {
  name: "items",
  components: {
    Item,
  },
  data() {
    return {
      msg: [
        {
          isUploadImg: true,
          desc: "支持jpg, png, jpeg 格式大小5M以内的图片",
          name: "头像",
          btnWord: "点击上传",
          id: 0,
        },
        {
          name: "用户名",
          placeholder: "请输入您要修改的用户名",
          val: this.$store.state.user.username,
          rawVal: this.$store.state.user.username,
          id: 1,
        },
        {
          name: "职位",
          placeholder: "请输入您要修改的职位",
          val: this.$store.state.user.job,
          rawVal: this.$store.state.user.job,
          id: 2,
        },
        {
          name: "公司",
          placeholder: "填写您的公司",
          val: this.$store.state.user.company,
          rawVal: this.$store.state.user.company,
          id: 3,
        },
      ],
    };
  },
  methods: {
    changeVal(val, id) {
      this.msg[id].val = val;
    },
    async changeName(val, id) {
      if (val && id) {
        const value = this.msg[id];
        switch (id) {
          case 1: // 修改用户名
            const res = await changeUsername(val);
            if (res.code == 1) {
              this.$message.success(res.msg);
              value.val = val;
              this.$store.commit("userData", res.data);
            } else {
              this.$message.error(res.msg);
            }
            break;
          case 2: // 修改职位名
            const res2 = await changeJobName(val);
            if (res2.code == 1) {
              this.$message.success(res2.msg);
              value.val = val;
              this.$store.commit("userData", res2.data);
            } else {
              this.$message.error(res2.msg);
            }
            break;
          case 3: // 修改公司名
            const res3 = await changeCompanyName(val);
            if (res3.code == 1) {
              this.$message.success(res3.msg);
              value.val = val;
              this.$store.commit("userData", res3.data);
            } else {
              this.$message.error(res3.msg);
            }
            break;
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
</style>